<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>秒表</title>
    <style>
        @keyframes tick6 {
            from {margin-top: 0;}
            to {margin-top: -12rem;}
        }

        @keyframes tick10 {
            from {margin-top: 0;}
            to {margin-top: -20rem;}
        }

        .digit-ten {
            animation: tick10 infinite steps(10, end);
        }
        .digit-six {
            animation: tick6 infinite steps(6, end);
        }

        body {
            overflow: hidden;
        }
        .container {
            text-align: center;
        }

        .digit {
            display: inline-block;
            height: 2rem;
            overflow: hidden;
            width: 1ch;
        }

        .digit span {
            display: block;
            height: 2rem;
            width: 100%;
        }

        .second .digit-six {
            animation-duration:6s;
        }

        .second .digit-ten {
            animation-duration:1s;
        }

        .minute .digit-six {
            animation-duration:360s;
        }

        .minute .digit-ten {
            animation-duration:60s;
        }

        .centi-second:nth-last-child(3) .digit-ten{
            animation-duration:100ms;
        }
        .centi-second:nth-last-child(2) .digit-ten{
            animation-duration:10ms;
        }

    </style>
</head>
<body>
<div class="container">
    <div>
        时间流速*10倍，方便查看效果
    </div>
    <br>
    <div class="digit minute">
        <span class="digit-six">0</span>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>0</span>
    </div>
    <div class="digit minute">
        <span class="digit-ten">0</span>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
        <span>7</span>
        <span>8</span>
        <span>9</span>
        <span>0</span>
    </div>
    <div class="digit">
        <span>:</span>
    </div>
    <div class="digit second">
        <span class="digit-six">0</span>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>0</span>
    </div>
    <div class="digit second">
        <span class="digit-ten">0</span>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
        <span>7</span>
        <span>8</span>
        <span>9</span>
        <span>0</span>
    </div>
    &nbsp;
    <div class="digit centi-second">
        <span class="digit-ten">0</span>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
        <span>7</span>
        <span>8</span>
        <span>9</span>
        <span>0</span>
    </div>
    <div class="digit centi-second">
        <span class="digit-ten">0</span>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
        <span>7</span>
        <span>8</span>
        <span>9</span>
        <span>0</span>
    </div>

    <div class="digit">
        <span>'</span>
    </div>
</div>
</body>
</html>